// 定义的函数以Use开头
// 在外面需要调用的响应式数据 需要return一下.
// 这里面的响应式状态 componsitonAPI都能够使用.
// 相比较mixin 来源更加明确
import {onUnmounted, onMounted, ref,getCurrentInstance} from "vue"
// function UseEchartsResize(){    
// const leftBottomEchartInstance = ref();

//     // 监听页面大小的变化
//     window.addEventListener("resize",handlePageResize)
    
//     function handlePageResize(){
//         console.log(1111111111111)
//         leftBottomEchartInstance.value.resize()
//     }
//     //  销毁期  V2 destoryed 
//     onUnmounted(()=>{
//         window.removeEventListener("resize",handlePageResize)
//         leftBottomEchartInstance.value.dispose()
//     })
//     return {leftBottomEchartInstance}
// }
// export default UseEchartsResize;

export default function useEchartsResize(chartContainer,options){
    const chartIntance = ref('');
    const {proxy} =getCurrentInstance()
    
    onMounted(()=>{
        console.log("=========================")
        chartIntance.value=proxy.$echarts.init(chartContainer.value);
        console.log("hooks里面",chartIntance)
        handlerSetOption(options)
        window.addEventListener("resize",handleResize)
    })
    onUnmounted(()=>{
        window.removeEventListener("resize",handleResize)
        chartIntance.value.dispose()
    })
    function handlerSetOption(options){
        chartIntance.value.setOption(options);
    }
    function handleResize(){
        console.log(1234);
         chartIntance.value.resize()
    }
    return chartIntance
}